<template>
    <div class="coupon_detail">
        <div class="coupon_cover">
            <img :src="coupon.thumb_text" />
        </div>

        <van-notice-bar
            left-icon="volume-o"
            :scrollable="false"
            background="#fff"
            color="rgb(55, 68, 134)"
            v-if="BusinessList.length > 0"
        >
            <van-swipe
                vertical
                class="notice-swipe"
                :autoplay="3000"
                :touchable="false"
                :show-indicators="false"
            >
                <van-swipe-item v-for="item in BusinessList">{{ `${item.business.nickname} 已领取了` }}</van-swipe-item>
            </van-swipe>
        </van-notice-bar>

        <div class="coupon_info">
            <div class="left">
                <div class="left_top">
                    <div><span>{{ coupon.rate * 100 }}</span>折</div>
                    <div class="top_info">
                        <div>{{ coupon.title }}</div>
                        <div>COUPON</div>
                    </div>
                </div>
            </div>
            <div class="receive">
                <van-button type="primary" class="right_btn" v-if="coupon.receive" @click="OnReceive">领取</van-button>
                <van-button type="danger" disabled class="right_btn" v-else>已领取</van-button>
            </div>
        </div>
        <div class="coupon_prompt">
            <div class="prompt_title">温馨提示：</div>
            <div><span>•</span>活动开始时间：{{ coupon.createtime_date }}</div>
            <div><span>•</span>活动结束时间：{{ coupon.endtime_date }}</div>
            <div><span>•</span>领取数量：{{ coupon.total }} 张 每人限领1张</div>
        </div>
    </div>

    <Tabbar />
</template>

<script setup>
    const { proxy } = getCurrentInstance();

    const business = proxy.$business;

    // 优惠券详情
    const coupon = ref({});

    // 优惠券id
    const cid = ref(proxy.$route.query.cid);
    // 已领取的用户数据
    const BusinessList = ref([]);

    onBeforeMount(() =>
    {
        GetCouponInfo();
    })

    const GetCouponInfo = async () =>
    {
        let params = {
            cid:cid.value,
            busid:business.value.id
        }

        let result = await proxy.$http.post({
            url:'/coupon/info',
            params
        })

        if(result.code === 1)
        {
            coupon.value = result.data.coupon;
            BusinessList.value = result.data.BusinessList;
        }else
        {
            proxy.$fail({
                message:result.msg,
                onClose:() =>
                {
                    proxy.$router.back();
                }
            });
        }
    }

    // 领取优惠券
    const OnReceive = async () =>
    {
        // 判断是否处于登录状态
        if(Object.getOwnPropertyNames(business.value).length === 0 || business.value.hasOwnProperty('id') === false)
        {
            proxy.$confirm({
                title:'跳转登录提示',
                message:'是否确认跳转到登录？'
            }).then(() =>
            {
                proxy.$cookies.set('redirect',{query:{cid:cid.value},path:'/coupon/info'});

                proxy.$router.push('/business/login');
                
            }).catch(() => {});

            return false;
        }

        // 封装请求数据
        let params = {
            cid:cid.value,
            busid:business.value.id
        }
        
        // 发起请求
        let result = await proxy.$http.post({
            url:'/coupon/receive',
            params
        })

        if(result.code === 1)
        {
            proxy.$success({
                message:result.msg,
                onClose:() =>
                {
                    // 更改领取按钮状态
                    coupon.value.receive = false;
                }
            })
        }else
        {
            proxy.$fail(result.msg);
        }
    }
    
</script>

<style scoped>
    @import url('/assets/css/CouponInfo.css');
</style>